<template>
  <div class="table-box">
    <ProTable ref="proTable" title="菜单列表" row-key="path" :indent="20" :columns="columns" :data="menuData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <menuDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="sysMenu">
import { onMounted, reactive, ref, watch } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { deleteMenu, editMenu, addMenu } from "@/api/modules/menu";
import menuDrawer from "@/views/proTable/components/menuDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { Tree } from "@/api/interface";
import { userStatus } from "@/utils/dict";

const proTable = ref();
// 所有菜单
// import { getMenuTreeAll } from "@/api/modules/menu";

import { useAuthStore } from "@/stores/modules/auth"; // 根据实际路径导入
// const { menuArr } = useAuthStore();
const authStore = useAuthStore();

// 本地菜单
import authMenuList from "@/assets/json/authMenuList.json";
import { pid } from "@/utils/dict";
const menuData = ref();

const mapMenuData = (data: any) => {
  return data.map(item => {
    return {
      id: item.id,
      path: item.url,
      type: item.type,
      name: item.name,
      meta: { title: item.name, icon: "Menu" },
      component: item.url,
      status: item.status,
      sort: item.sort,
      identification: item.identification,
      memo: item.memo,
      pid: item.pid,
      created_at: item.created_at,
      updated_at: item.updated_at,
      children: item.children ? mapMenuData(item.children) : [] // 递归处理子节点
    };
  });
};

// 更新表格
watch(
  () => authStore.menuArr,
  newValue => {
    menuData.value = mapMenuData(newValue);
  }
);

// const menuData = ref(mapMenuData(authStore.menuArr).concat(authMenuList));

onMounted(async () => {
  // const myMenuData = await getMenuTreeAll();
  // console.log(myMenuData.data, "myMenuData-----");
  // 然后在你的代码中调用这个函数来处理菜单数据
  // myMenuData.data = mapMenuData(myMenuData.data);
  // console.log(authStore.menuArr, "menuArr---_---");
  const myMenuData = mapMenuData(authStore.menuArr);
  menuData.value = myMenuData.concat(authMenuList.data);
});

// const menuData = ref(myMenuData.data);

// import { useAuthStore } from "@/stores/modules/auth"; // 根据实际路径导入
// const { authMenuListGet } = useAuthStore();
// const menuData = ref(authMenuListGet);
// console.log(menuData, "menuData-----");

// 表格配置项
// const columns1: ColumnProps[] = [
//   // const columns = reactive<ColumnProps<Tree.ResRecordList>[]>([
//   { prop: "meta.title", label: "菜单名称", align: "left", width: 130 },
//   { prop: "meta.icon", label: "菜单图标" },
//   { prop: "name", label: "菜单 name", width: 130 },
//   {
//     prop: "type",
//     label: "菜单类型",
//     width: 100,
//     tag: true,
//     enum: pid,
//     fieldNames: { label: "label", value: "value" }
//   },
//   { prop: "sort", label: "排序" },
//   { prop: "path", label: "菜单路径", width: 200 },
//   { prop: "component", label: "组件路径", width: 200 },
//   { prop: "created_at", label: "创建时间", width: 170 },
//   { prop: "updated_at", label: "更新时间", width: 170 },
//   { prop: "operation", label: "操作", width: 250, fixed: "right" }
// ];

// 表格配置项
const columns = reactive<ColumnProps<Tree.ResMenuList>[]>([
  { prop: "meta.title", label: "菜单名称", align: "left", width: 130 },
  { prop: "meta.icon", label: "菜单图标", width: 130 },
  { prop: "name", label: "菜单 name", width: 130 },
  {
    prop: "type",
    label: "菜单类型",
    width: 100,
    tag: true,
    enum: pid,
    fieldNames: { label: "label", value: "value" }
    // render(scope: any) {
    //   return (
    //     <div>
    //       <el-tag type={scope.row.type == 2 ? "primary" : scope.row.type == 1 ? "success" : "info"}>
    //         {scope.row.type == 2 ? "公司/组织" : scope.row.type == 1 ? "个人" : "未知"}
    //       </el-tag>
    //     </div>
    //   );
    // }
  },
  { prop: "sort", label: "排序" },
  {
    prop: "status",
    label: "状态",
    tag: true,
    sortable: true, // 排序
    enum: userStatus,
    fieldNames: { label: "label", value: "value" }
  },
  { prop: "path", label: "菜单路径", width: 200 },
  { prop: "component", label: "组件路径", width: 200 },
  { prop: "created_at", label: "创建时间", width: 170 },
  { prop: "updated_at", label: "更新时间", width: 170 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
]);
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof menuDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Tree.menuObject> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addMenu : title === "编辑" ? editMenu : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};

// 删除用户信息
const deleteAccount = async (params: Tree.ResAreaList) => {
  await useHandleData(deleteMenu, { id: [params.id] }, `删除【${params.name}】菜单规格`);
  proTable.value?.getTableList();
};
</script>
